<script setup lang="ts">
import pageWrap from "@/components/pageWrap/index.vue";
import { useRefHistory } from "@vueuse/core";
import { Button, Collapse, CollapsePanel, Textarea } from "ant-design-vue";
import { ref } from "vue";

const text = ref("");
const { history, undo, redo } = useRefHistory(text);

const activeKey = ref(1);
</script>
<template>
  <pageWrap headerContent>
    <template v-slot:header>
      <div class="text-2xl h-12 pl-5 pt-2 font-bold">撤销/重做</div>
      <div class="pl-5">跟踪 ref 的更改历史，提供撤消和重做功能</div>
    </template>
    <div class="overflow-y-auto pb-20">
      <div>
        <div class="bg-white p-2">
          <Collapse v-model:activeKey="activeKey">
            <CollapsePanel key="1" header="撤销/重做">
              <Textarea v-model:value="text" />
              <ul>
                <li v-for="entry in history" :key="entry.timestamp">
                  {{ entry }}
                </li>
              </ul>
              <p>
                <Button type="primary" @click="undo"> 撤销 </Button>
                <Button type="primary" @click="redo" class="ml-2">
                  重做
                </Button>
              </p>
            </CollapsePanel>
          </Collapse>
        </div>
      </div>
    </div>
  </pageWrap>
</template>
<style scoped lang="less"></style>
